import { html } from 'lit';
import { ifDefined } from 'lit/directives/if-defined.js';
import { styleMap } from 'lit/directives/style-map.js';
import { unsafeHTML } from 'lit/directives/unsafe-html.js';
import { Meta, Canvas, ArgsTable, Story } from '@storybook/addon-docs';

<Meta
  title="Components/Pagination"
  component="bl-pagination"
  argTypes={{
     totalItems: {
       control: {
        type: 'number',
        default:1500
      }
    },
     itemsPerPage: {
       control: {
        type: 'number',
        default:10
      }
    },
   hasJumper: {
      control: {
        type: 'boolean',
        default:true
      }
    },
    jumperLabel: {
       control: {
        type: 'text',
        default:"Go To"
      }
    },
   hasSelect: {
      control: {
        type: 'boolean',
        default:true
      }
    },
    selectLabel: {
      control: {
        type: 'text',
        default:"Show"
      }
    },
    itemsPerPageOptions: {
      control: {
        type: 'array',
        default:[
            {
              text: '100 Sonuç',
              value: 100,
            },
            {
              text: '250 Sonuç',
              value: 250,
            },
            {
              text: '500 Sonuç',
              value: 500,
            },
            {
              text: '1000 Sonuç',
              value: 1000,
            }]
      }
    },
  }}
/>

export const PaginationTemplate = (args) => html`
      <bl-pagination
      current-page=${ifDefined(args.currentPage)}
      total-items=${ifDefined(args.totalItems)}
      items-per-page=${ifDefined(args.itemsPerPage)}
      has-jumper=${ifDefined(args.hasJumper)}
      jumper-label=${ifDefined(args.jumperLabel)}
      has-select=${ifDefined(args.hasSelect)}
      select-label=${ifDefined(args.selectLabel)}
      .itemsPerPageOptions=${ifDefined(args.itemsPerPageOptions)}
      >
      </bl-pagination>
  `

# Pagination

<bl-badge icon="document">[ADR](https://github.com/Trendyol/baklava/issues/139)</bl-badge>
<bl-badge icon="puzzle">[Figma](https://www.figma.com/file/RrcLH0mWpIUy4vwuTlDeKN/Baklava-Design-Guide?node-id=118%3A4074)</bl-badge>
<bl-badge icon="check_fill">RTL Supported</bl-badge>

The Pagination component enables the user to select a specific page from a range of pages. Number of content per page can also be selected by the user


## Simple Pagination
Use a simple pagination for navigating to the next or previous page or a selected page.

<Canvas>
<Story name="Basic Usage" args={{currentPage:1,totalItems:1500}}>
    {PaginationTemplate.bind({})}
  </Story>
</Canvas>

## Jumper
Use the jumper to directly go to a specific page.

<Canvas>
<Story name="Jumper" args={{currentPage:1,totalItems:1500,hasJumper:true}}>
    {PaginationTemplate.bind({})}
  </Story>
</Canvas>

## Select
Use the select helper to change the number of items per page.

<Canvas>
<Story name="Select" args={{currentPage:1,totalItems:1500,hasSelect:true}}>
    {PaginationTemplate.bind({})}
  </Story>
</Canvas>

## Customization
The labels and the texts of the jumper and select element are fully customizable. The default select options can also be changed.

<Canvas>
<Story name="Customization"  args={{
  currentPage:1,
  totalItems:1500,
  itemsPerPage:100,
  hasJumper:true,
  jumperLabel:"Sayfaya Git",
  hasSelect:true,
  selectLabel:"Sayfa Başına",
  itemsPerPageOptions:[
  {
    text: '100 Sonuç',
    value: 100,
  },
  {
    text: '250 Sonuç',
    value: 250,
  },
  {
    text: '500 Sonuç',
    value: 500,
  },
  {
    text: '1000 Sonuç',
    value: 1000,
  }]
  }}>
    {PaginationTemplate.bind({})}
  </Story>
</Canvas>

To set a custom options list for `bl-pagination`, use the **itemsPerPageOptions** property as an array of objects containing `value` and `text`. Check the example below:

```html
<bl-pagination current-page="1" total-items="1500" items-per-page="100" has-jumper="true" jumper-label="Sayfaya Git" has-select="true" select-label="Sayfa Başına"></bl-pagination>

<script>
  const blPagination = document.querySelector('bl-pagination');

  blPagination.itemsPerPageOptions = [
    {
      text: '100 Sonuç',
      value: 100,
    },
    {
      text: '250 Sonuç',
      value: 250,
    },
    {
      text: '500 Sonuç',
      value: 500,
    },
    {
      text: '1000 Sonuç',
      value: 1000,
    }
  ]
</script>
```

## RTL Support

The pagination component supports RTL (Right-to-Left) text direction. You can enable RTL mode by setting the `dir` attribute on a parent element or the `html` tag.

<Canvas>
  <Story name="RTL Support">
    {() => html`
      <div>
        <iframe
          srcdoc="
            <html dir='rtl'>
              <head>
                <script type='module' src='https://cdn.jsdelivr.net/npm/@trendyol/baklava@latest/dist/baklava.js'></script>
                <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/@trendyol/baklava@latest/dist/themes/default.css'>
                <style>
                  body {
                    margin: 0;
                    padding: 24px;
                  }
                  .container {
                    display: flex;
                    flex-direction: column;
                    gap: 16px;
                  }
                  bl-pagination {
                    width: 100%;
                  }
                </style>
              </head>
              <body>
                <div class='container'>
                  <bl-pagination
                    current-page='1'
                    total-items='1500'
                    items-per-page='10'
                    has-jumper='true'
                    jumper-label='انتقل إلى'
                    has-select='true'
                    select-label='عرض'
                  ></bl-pagination>
                </div>
                <script>
                  document.querySelectorAll('bl-pagination').forEach(pagination => {
                    pagination.itemsPerPageOptions = [
                      { text: '10 نتيجة', value: 10 },
                      { text: '25 نتيجة', value: 25 },
                      { text: '50 نتيجة', value: 50 },
                      { text: '100 نتيجة', value: 100 }
                    ];
                  });
                </script>
              </body>
            </html>
          "
          style="border: none; width: 100%; height: 300px;"
        ></iframe>
      </div>
    `}
  </Story>
</Canvas>

Here's a vanilla JavaScript and HTML example of how to use RTL support:

```html
<!-- index.html -->
<html dir="rtl">
<head>
  <meta charset="UTF-8">
  <title>Baklava Pagination RTL Example</title>
  <script type="module" src="https://cdn.jsdelivr.net/npm/@trendyol/baklava@3.3.0-beta.1/dist/baklava.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@trendyol/baklava@3.3.0-beta.1/dist/themes/default.css">
  <style>
    body {
      margin: 0;
      padding: 24px;
    }
    .container {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
    bl-pagination {
      width: 100%;
    }
  </style>
</head>
<body>
  <div class="container">
    <h3>RTL Pagination</h3>
    <bl-pagination
      current-page="1"
      total-items="1500"
      items-per-page="10"
      has-jumper="true"
      jumper-label="انتقل إلى"
      has-select="true"
      select-label="عرض">
    </bl-pagination>
  </div>

  <script>
    const pagination = document.querySelector('bl-pagination');
    pagination.itemsPerPageOptions = [
      { text: '10 نتيجة', value: 10 },
      { text: '25 نتيجة', value: 25 },
      { text: '50 نتيجة', value: 50 },
      { text: '100 نتيجة', value: 100 }
    ];
  </script>
</body>
</html>
```

## Reference

<ArgsTable of="bl-pagination" />


